<template>
    <div>
        <van-swipe :autoplay="3000" :width="375" :height="200">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
       <van-cell class='vanc' title="健身问答" is-link value="查看全部"  url="//youzan.github.io/vant/mobile.html"/>
       <div class="swiper-container">
                <swiper :options="swiperOption" ref="mySwiper" >
                    <!-- slides -->
                    <swiper-slide id='slide1'>I'm Slide 1</swiper-slide>
                    <swiper-slide id='slide2'>I'm Slide 2</swiper-slide>
                    <swiper-slide id='slide3'>I'm Slide 3</swiper-slide>
                    <swiper-slide id='slide4'>I'm Slide 4</swiper-slide>
                    <swiper-slide id='slide5'>I'm Slide 5</swiper-slide>
                </swiper>
        </div>
        <div class='shadow'></div>

        <van-cell class='vanc' title="饮食课堂" is-link value="查看全部"  url="//youzan.github.io/vant/mobile.html"/>
       <div class="swiper-container">
                <swiper :options="swiperOption" ref="mySwiper" >
                    <!-- slides -->
                    <swiper-slide id='slide1'>I'm Slide 1</swiper-slide>
                    <swiper-slide id='slide2'>I'm Slide 2</swiper-slide>
                    <swiper-slide id='slide3'>I'm Slide 3</swiper-slide>
                    <swiper-slide id='slide4'>I'm Slide 4</swiper-slide>
                    <swiper-slide id='slide5'>I'm Slide 5</swiper-slide>
                </swiper>
        </div>

        <div class='shadow'></div>

        <van-cell class='vanc' title="健身小Tips" is-link value="查看全部"  url="//youzan.github.io/vant/mobile.html"/>
       <div class="swiper-container">
                <swiper :options="swiperOption" ref="mySwiper" >
                    <!-- slides -->
                    <swiper-slide id='slide1'>I'm Slide 1</swiper-slide>
                    <swiper-slide id='slide2'>I'm Slide 2</swiper-slide>
                    <swiper-slide id='slide3'>I'm Slide 3</swiper-slide>
                    <swiper-slide id='slide4'>I'm Slide 4</swiper-slide>
                    <swiper-slide id='slide5'>I'm Slide 5</swiper-slide>
                </swiper>
        </div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import '../../node_modules/swiper/dist/css/swiper.css'
import { videoPlayer } from 'vue-video-player';
export default {
    name:'Sp',
    data () {
        return {
            images: [
                'http://img4.imgtn.bdimg.com/it/u=4266461126,558652434&fm=26&gp=0.jpg',
                'http://img2.imgtn.bdimg.com/it/u=2265009346,3701136686&fm=26&gp=0.jpg',
                'http://img1.imgtn.bdimg.com/it/u=307362406,3192779649&fm=26&gp=0.jpg',
                'http://img1.imgtn.bdimg.com/it/u=112210317,436304620&fm=26&gp=0.jpg',
            ],
            swiperOption: {
                notNextTick: true,
                direction : 'horizontal',
                // freeMode : true,
                // freeModeMomentum : false,
                // slidesPerView :'auto'

            },
            playerOptions: {
//              playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                type: "video/mp4",
                src: "https://mp4.vjshi.com/2016-06-08/add04c33328c1846084154ad31474869.mp4" //你的视频地址（必填）
                }],
                poster: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=528975294,2861049284&fm=26&gp=0.jpg", //你的封面地址
                width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
//              controlBar: {
//              timeDivider: true,
//              durationDisplay: true,
//              remainingTimeDisplay: false,
                fullscreenToggle: true  //全屏按钮
//              }
            }
        }
    },
    components:{
      videoPlayer
   },
   computed: {
       player() {
      return this.$refs.videoPlayer.player
    }

   }

}
</script>

<style scoped>
#slide1{
      width:200px!important;
      height:95px;
      background: red;
      margin-right: 8px
  }
  #slide2{
      width:200px!important;
      height:95px;
      background: palevioletred;
      margin-right: 8px
  }
  #slide3{
      width:200px!important;
      height:95px;
      background: peru;
      margin-right: 8px
  }
  #slide4{
      width:200px!important;
      height:95px;
      background: brown;
      margin-right: 8px
  }
  #slide5{
      width:200px!important;
      height:95px;
      background: lightgreen;
      margin-right: 8px
  }
  .shadow{
    width: auto;
    height: 10px;
    background:silver;
    margin-top:10px;
    margin-bottom:10px;
}
</style>
